import { Link } from '@brillout/docpress'
import { UseBati, UiFrameworkExtension } from '../../components'

The `vike-vue` package is a <Link href="/extensions">Vike extension</Link> that integrates [Vue](https://vuejs.org) in a full-fledged manner, providing a DX like a regular frontend framework such as Nuxt.

Version history: [`CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)  
Examples: [Bati](https://batijs.dev) and [`examples/`](https://github.com/vikejs/vike-vue/tree/main/examples)  
Source code: [GitHub > `vikejs/vike-vue`](https://github.com/vikejs/vike-vue)  

The documentation for using `vike-vue` can be found throughout this website (`vike.dev`).

> The guides, such as <Link href="/data-fetching" />, assume you're using Vike with <UiFrameworkExtension name noLink comma />. If you aren't then see the sections `Without vike-{react,vue,solid}` such as <Link href="/useData#without-vike-react-vue-solid" />.

> You can integrate Vue yourself instead of using `vike-vue`, see <Link href="/vue" />.


## Scaffold new `vike-vue` app

Use [Bati](https://batijs.dev) for creating new apps.

> If you select Vue then Bati scaffolds a Vike + `vike-vue` app.


## Add `vike-vue` to existing Vike app

To add `vike-vue` to an existing Vike app: install the `vike-vue` npm package (e.g. `$ npm install vike-vue`) then extend your existing `+config.js` file (or create one) with `vike-vue`:

```js
// /pages/+config.js

import vikeVue from 'vike-vue/config' // [!code ++]

export default {
  // ...
  extends: [vikeVue] // [!code ++]
}
```

You can then use <Link href="#under-the-hood">new settings introduced by `vike-vue`</Link>:

```js
// /pages/+config.js

import vikeVue from 'vike-vue/config'

export default {
  // ...

  // Setting to toggle SSR // [!code ++]
  ssr: false, // [!code ++]

  extends: [vikeVue]
}
```


## Under the hood

The `vike-vue` extension is only `687` lines of code ([as of Mai 2024](https://gist.github.com/brillout/b4b2a2547a9b8111f9c3fc8cb5e7bafd)).
It's simple, readable, and highly polished.

Reading the [source code of `vike-vue`](https://github.com/vikejs/vike-vue) is very much an option for understanding, debugging, and/or contributing.

> Contributions are welcome! See [CONTRIBUTING.md](https://github.com/vikejs/vike-vue/blob/main/CONTRIBUTING.md) to get started.

Essentially `vike-vue` does this:
- Sets <Link href="/hooks">Vike hooks</Link> and <Link href="/settings">Vike settings</Link> on your behalf.
  > Most notably:
  > - <Link href="/onRenderHtml">`onRenderHtml()`</Link>
  >   (see [renderer/onRenderHtml.ts](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/src/renderer/onRenderHtml.ts))
  > - <Link href="/onRenderClient">`onRenderClient()`</Link>
  >   (see [renderer/onRenderClient.ts](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/src/renderer/onRenderClient.ts))
- Creates new Vike settings and new Vike hooks. (By using <Link href="/meta" />.)
  > For example <Link href="/Layout">`<Layout>`</Link>, <Link href="/ssr">`ssr`</Link>, and <Link href="/onCreateApp">`onCreateApp()`</Link>.
- Implements Vue component hooks.
  > For example <Link href="/useData">`useData()`</Link> and <Link href="/usePageContext">`usePageContext()`</Link>.

It implements the following:

- <Link noBreadcrumb href="/useData" />
- <Link noBreadcrumb href="/usePageContext" />
- <Link noBreadcrumb href="/Layout" />
- <Link href="/head">`<Head>`</Link>
- <Link href="/head">`title`</Link>
- <Link href="/head">`favicon`</Link>
- <Link noBreadcrumb href="/lang" />
- <Link noBreadcrumb href="/ssr" />
- <Link noBreadcrumb href="/stream" />
- <Link noBreadcrumb href="/clientOnly" />
- <Link noBreadcrumb href="/bodyHtmlBegin" />
- <Link noBreadcrumb href="/bodyHtmlEnd" />
- <Link noBreadcrumb href="/onCreateApp" />
- <Link noBreadcrumb href="/onBeforeRenderClient" />
- <Link noBreadcrumb href="/onAfterRenderHtml" />

> For a better overview, see the following lists instead. (They also include all settings and hooks created by `vike-vue`.)
> - <Link href="/settings" />
> - <Link href="/hooks" />


## See also

- [GitHub > `vikejs/vike-vue`](https://github.com/vikejs/vike-vue)
- [GitHub > `vikejs/vike-vue` > `CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)
- [GitHub > `vikejs/vike-vue` > `examples/`](https://github.com/vikejs/vike-vue/tree/main/examples)
- <Link href="/vue" />
- <Link href="/vike-react" />
- <Link href="/vike-solid" />
